<script lang="ts" setup>
import { ref, reactive, nextTick } from 'vue';
import { useRouter } from 'vue-router';
import { showToast} from "vant";

import headerUtil from "./base/common/headerUtil.vue";
import Clent from "../req/common.js";
import Utils from "../req/Utils.js";
import reqApis from "../req/reqApis.js";

const router = useRouter();

const currentData = ref<any>({
  headerObj: {
    showType: 7
  },
  list: Clent.getSession("cart"),
});

const createOrder = () => {
  let arr = currentData.value.list;
  let productList = [];
  for(let i=0; i<arr.length; i++) {
    for(let j=0; j<arr[i].productList.length; j++) {
      let obj = {
        productId: arr[i].productList[j].productId,
        productQuantity: arr[i].productList[j].number,
        shopId: arr[i].productList[j].shopId
      }
      productList.push(obj)
    }
  }
  let params = {
    productList:productList
  }
  reqApis.createOrderApi(productList).then((res: any) => {
    showToast("下单成功");
    Utils.clearCart();
    router.push("/orderMaster")
  }).catch((err:any )=> {
    console.log("sasdfsadf", err)
  }) 
};
const getImg = (str:String, index:any) => {
  return Utils.getImg(str, index);
};
const getCount = () => {
  let result = Utils.countCart();
  return result.money;
};
const headerFn = () => {

};
</script>
<template>
  <section class="sendOrder">
    <headerUtil :obj="currentData.headerObj" @myClick="headerFn">确认订单</headerUtil>
    <div class="content">
      <div class="userInfo">
        <div class="name"><strong>Aaron 18202070211</strong></div>
        <div class="address">广东广州市番禺区城区广州市番禺区大石镇会江丰晟工业园F栋四楼 </div>
      </div>
      <div class="shopItem" v-for="(shopItem, index) in currentData.list" :key="index">
        <div class="title"><i></i>三只松鼠旗舰店</div>
        <div class="product" v-for="(item, i) in shopItem.productList" :key="i">
          <div class="productIcon" :style="{background: `url(${getImg(item.productIcon, 0)}) no-repeat center`}"></div>
          <div class="info">
            <strong class="desc">{{item.productName}}</strong>
            <div class="wrap"><span class="money">￥{{item.productPrice}}</span> <span class="num">x{{item.number}}</span></div>
          </div>
        </div>
      </div>
      <div class="countMenoy">
        <div class="gold"><label>商品金额</label><span>¥ {{getCount()}}</span></div>
        <div class="gold"><label>运费</label><span>¥ 0.00</span></div>
        <div class="goldCount"><strong>总价：</strong><span>¥ {{getCount()}}</span></div>
      </div>
      <div class="btn-wrap">
        <div class="send-btn" @click="createOrder()">购买</div>
      </div>
    </div>
  </section>
</template>

<style lang="less" scoped>
.sendOrder {
  width: 3.75rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .content {
    flex: 1;
    overflow-y: auto;
    .userInfo {
      padding: 12px 10px;
      background: #fff url("../assets/images/user-icon-1.png") -7px bottom repeat-x;
      background-size: 64px 5px;
      font-size: .14rem;
      .name {
        height: .2rem;
        line-height: .2rem;
      }
      .address {
        line-height: .15rem;
      }
    }
    .shopItem {
      margin: .15rem 0;
      background: white;
      .title {
        padding: 0 .1rem;
        height: .4rem;
        display: flex;
        align-items: center;
        background: white;
        font-size: 16px;
        font-weight: 700;
        border-bottom: .01rem solid #f7f7f7;
        i {
          width: .16rem;
          height: .16rem;
          background: url("../assets/images/shop-icon-4.png") no-repeat center;
          background-size: contain;
          margin-right: .1rem;
        }
      }
      .product {
        padding: .1rem .1rem 0;
        display: flex;
        border-bottom: .01rem solid #f7f7f7;
        .productIcon {
          width: .75rem;
          height: .75rem;
          background-size: cover!important;
          margin-right: .1rem;
        }
        .info {
          flex: 1;
          padding-bottom: .1rem;
          .desc {
            color: #333;
            line-height: .2rem;
            margin-bottom: .05rem;
            font-size: .14rem;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }
          .wrap {
            display: flex;
            align-items: center;
            justify-content: space-between;
            .money {
              height: .3rem;
              line-height: .3rem;
              color: #e93b3d;
              font-size: .16rem;
            }
            .num {
              font-size: .12rem;
            }
          }
          
        }
      }
    }
    .countMenoy {
      background: #fff;
      padding: .1rem;
      font-size: .16rem;
      color: #333;
      .gold {
        height: .25rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        span {
          color: #e93b3d;
        }
      }
      .goldCount {
        height: .3rem;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        font-size: .18rem;
        span {
          color: #e93b3d;
        }
      }
    }
    .btn-wrap {
      background: white;
      padding: .2rem 0 .3rem;
      .send-btn {
        width: 3.55rem;
        height: .45rem;
        line-height: .45rem;
        background: #3884ff;
        color: #fff;
        border-radius: .04rem;
        margin: 0 auto;
        text-align: center;
        font-size: 16px;
      }
    }
    
  }
}
</style>
